<template>
  <div class="authority-tree-div">
    <ul class="tree-auth-root" @click="clickChangeDisplay($event)">
      <a class="authority-ext-flag" @click="clickChangeDisplay($event)">{{extendFlag}}</a><a class="authority-tree-item" @click="clickChangeDisplay($event)">{{authName}}</a>
      <div :style="{display:displayStyle}">
        <AuthorityTreeComponent
            v-for="item in sonList" v-bind:key="item.authId"
            :auth-get-url="item.authPath"
            :auth-name="item.authorityName"
            :auth-id="item.authId"
        />
      </div>
    </ul>
  </div>
</template>

<script>
import {postRequest} from "@/axio2";

export default {
  name: "AuthorityTreeComponent",
  data(){
    return{
      displayStyle:'block',
      extendFlag:'+',
      sonList:[]
    }
  },
  props:{
    authGetUrl:String,
    authName:String,
    authId:Number
  },
  methods:{
    clickChangeDisplay(event){
      // 避免单击子节点触发父节点事件
      let event1 = event.currentTarget;
      let event2 = event.target;
      if(event1===event2) {
        if (undefined === this.authGetUrl) {
          // 如果是非叶子结点
          // 已经请求过的数据，直接展开或取消显示
          if (this.sonList.length > 0) {
            if ('block' === this.displayStyle) {
              this.displayStyle = 'none';
              this.extendFlag = '+';
            } else {
              this.displayStyle = 'block';
              this.extendFlag = '-';
            }
          } else {
            // 未请求过的数据，需要请求数据
            postRequest(
                "authority/queryAuthTree.do",
                {'authId': this.authId, 'ifGetTree': '1', 'pAuthId': this.authId},
                this.authRequestSuccess,
                null,
                this
            );
            this.extendFlag = '-';
          }
        } else {
          // 如果是有菜单路径的叶子结点
          this.$router.push(this.authGetUrl);
        }
      }
    },
    authRequestSuccess(resp,component){
      let son = JSON.parse(resp.data.errorMsg);
      component.$data["sonList"] = son.sonAuthList;
    }
  },
  mounted() {
    /* 如果URL为空，则 */
    if(undefined!==this.authGetUrl && ""!==this.authGetUrl){
      this.extendFlag = "●";
    }
  }
}
</script>

<style scoped>
.tree-auth-root{
  margin-inline-start: 15px;
  padding-inline-start: 0;
  padding-top: 7px;
  margin-top: 3px;
}
.authority-tree-div{
  cursor:pointer
}
.authority-tree-item:hover{
  font-weight: bold;
}
.authority-tree-item{
  padding-left: 5px;
}
.authority-ext-flag{
  font-size: larger;
}
</style>